<template>
  <div id="data">11111</div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    list: [],
  },
  data() {
    return{
        all: [
            {
                name: "jj",
                value: 15
            },
        ]
    }
    
  },
  methods: {
    get() {
      console.log(this.all);
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#data"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "计划占比情况",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            data: this.all,
          },
        ],
      });
    },
    format(list){
        let arr = list;
        var index = 0;
        for (var one of arr) {
            // console.log(list[index]);
            // console.log(list[index].name);
            this.all[index].name = one.name;
            this.all[index].value = one.weight;
            console.log(this.all[index]);
            index = index + 1;
        }
    }
  },
  mounted() {
    this.all = this.list;
    this.format(this.list);
    this.get();
  },
};
</script>

<style scoped>
#data {
  height: 500px;
  width: 600px;
}
</style>